@import "common";
@import "color";
body{
  background-color: #fbfbfb;
}
#order{

  background-color: #fbfbfb;

  .header{
    font-size: 1em;
    height: 56px;
    line-height: 56px;
    padding: 0;
    background-color: #FFFFFF;
    border-bottom: 1px #d7d7d7 solid;
    box-shadow: 1px 1px 1px #e2e2e2;
    position: fixed;
    left: 0;
    top : 0;
    width: 100%;
    z-index: 100;
    top: 0;

    ul{
      width : 100%;

      li{
        float : left;
        width : 25%;
        text-align: center;
        &.active{
          border-bottom: 1px $mafu-darken-blue solid;
          color : $mafu-darken-blue;
        }
      }


    }
  }

  .content{
    font-size: 1.2em;

    .empty{
      width : 100%;
      margin : 60% auto;

      img{
        display: block;
        margin : 0 40%;
        width:4em;
      }
      p{
        font-size: .9em;
        margin : 0 32%;
      }
    }
  }

  .list{
    font-size: 1.2em;
    overflow: auto;
    margin-top: 57px;

    .order{
      background-color: #FFFFFF;
      margin: 2% auto;
      border-top: 1px solid #d7d7d7;
      border-bottom: 1px solid #d7d7d7;
      padding: 3% 0;

      .list-header {
        padding : 1% 0;

        span{
          font-size: .6em;
          color: #999999;
          margin-left: 6%;
          label{
            color: #333333;
          }
        }

        span:nth-child(2){
          display: block;
          margin-top: 2px;
        }

        span:nth-child(3){
          float: right;
          margin-right: 5%;
          margin-top:-8%;
          font-size: .752em;
          color: $mafu-text-blue;
        }
      }

      .goods{
        background-color: #F3F9FF;
        margin-top: 10px;
        padding: 3%;
        overflow: hidden;

        .goods-left{
          width: 70%;
          float: left;
          overflow: hidden;
          .img{
            width : 28%;
            float: left;
            max-width: 78.5px;
            margin-right: 3%;

            img{
              width : 100%;
              display: inline-block;
            }
          }
          .goods-info{
            width: 61%;
            float: left;
            margin-top: 4px;
            .name{
              font-size : .86em;
              color : #333333;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              img{
                width:30%;
              }
            }
            .spec{
              margin-top : 4px;
              font-size: .7em;
              color : #999999;
              label{
                color : #333333;
              }
            }
            .act{
              display: inline-block;
              padding: 0 1%;
              background-color: $mafu-text-blue;
            }
          }
        }
        .goods-right{
          width: 30%;
          margin-top: 4px;
          float: right;
          text-align: right;
          .price{
            color : #999999;
            font-size: .7em;
            label{
              color : #000000;
              font-size: 1.25em;
            }
          }
          .amount{
            color : #000000;
            font-size: .7em;
            margin-top : 4px;
          }
        }
      }

      .mod{

        text-align: right;

        .total-price{
          font-size: .7em;
          color: #999999;
          padding: 3% 0;
          width: 90%;
          margin: 0 auto;
          border-bottom: 1px solid #d7d7d7;
          label{
            color: #000000;
            font-size: 1.35em;
            display: inline-block;
          }
        }

        .no-border{
          border : none;
        }

        a{
          display: inline-block;
          border: 1px solid #666666;
          border-radius: 3px;
          font-size: 0.8em;
          padding: 1%;
          color: #666666;
          margin-top: 3%;
        }

        a:last-child{
          margin-left: 2%;
          margin-right: 5%;
        }

        .pay{
          color: $mafu-text-blue;
          border-color: $mafu-text-blue;
          margin-left: 5%;
        }
      }
    }

    .pageBtn{
      background: url("../images/more.png") no-repeat #ffffff;
      width: 100%;
      height: 50px;
      color: #3f6ee0;
      text-align: center;
      background-position-x: 35%;
      background-position-y: 35%;
      font-size: .8em;
      padding-top: 1%;

    }
  }

  @import "order-pay";

  .orderDetail{
    .orderInfo{
      background-color: #ffffff;
      width: 100%;
      font-size : .8em;
      padding-top:3%;

      div:first-child{
        span:last-child{
          color: $mafu-text-blue;
        }
      }

      div{
        margin:3% 0;
        padding-left: 3%;
        color: #999999;

        span:last-child{
          display: inline-block;
          margin-left: 2%;
          color: #000000;
          word-break:break-all;
          padding-right : 5%;
        }
      }

      .line{
        width:90%;
        border-bottom: 1px dotted;
        margin:5% auto;
      }
    }

    .goodsInfo{
       margin-top : -5%;
       border-bottom: 1px solid #999999;
       .part-head{
         background-color: #ffffff;
       }

      .order-goods{
        background-color: #f3f3f3;

        li{
          border-bottom: 1px solid;
        }

        .activity{
          margin-top: 20%;
        }
      }

      .footer{
        position: relative;
        border-top : none;
        text-align: right;
        font-size: .8em;
        color: #999999;
        margin-left: -3%;
        label{
          color: #F34240;
        }
      }
    }

    .logistics{
      width: 100%;
      background-color: #ffffff;
      margin-top: 2%;
      border-top: 1px solid #999999;
      border-bottom: 1px solid #999999;

      .title{
        font-size: 1.1em;
        border-bottom: 1px solid #999999;
        width: 90%;
        margin: 0 auto;
        padding: 3% 0;
      }

      .empty{
        width: 100%;
        height: 230px;
        font-size: .8em;
        text-align: center;
        padding-top: 25%;
      }

      .traces{
        padding-left : 8%;

        .trace{
          margin-top: 3%;
          div{
            color: #999999;
          }
        }

        .trace:first-child{
          .text{
            div{
              color: $mafu-text-blue;
            }
          }

          .point{
            background:url("../images/lan.png") no-repeat;
          }
        }

        .point{
          background:url("../images/bai.png") no-repeat;
          width:30px;
          height:30px;
          position: absolute;
          margin-top: -4%;
          margin-left: 1px;
        }

        .dian{
          border-left: 5px dotted #999999;
          margin-left: 2%;
          margin-top:5%;
        }

        .text{
          border-bottom: 1px solid #999999;
          padding-left: -7%;
          padding-bottom: 3%;
          width: 80%;
          font-size: 0.4em;
          margin: 0 auto;
        }
      }
    }
  }
}